// import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import { Collapse, Divider, Col, Row } from 'antd';
import styles from './index.less';
import type { X6API } from '@/models/models';
import type { Dispatch } from '@umijs/max';

const { Panel } = Collapse;

interface IProps {
  mobileDataItem: X6API.mobileDataItem;
  dispatch: Dispatch;
}

function CustomNode(props: IProps) {
  const { mobileDataItem } = props;
  console.log('mobileDataItem', mobileDataItem);
  const titleNode = (
    <div>
      <span className={styles.title}>{mobileDataItem.title}</span>
      {/* <Divider /> */}
    </div>
  );
  return (
    <Collapse>
      <Panel header={titleNode} key="1" className={styles.contentStyle}>
        <Divider style={{ marginTop: -15, marginBottom: 10 }} />
        <Row>
          <Col span={22}>
            <Col>
              <span>部署单元</span> : <a href=" ">{mobileDataItem['部署单元']}</a>
            </Col>
            <Col>
              <span>服务名称</span> :{' '}
              <span style={{ fontSize: 8 }}>{mobileDataItem['服务名称']}</span>
              <a href="https://www.baidu.com">接口文档</a>
            </Col>
          </Col>
          <Col span={2}>copy</Col>
        </Row>
        <Row>
          <Col span={12}>
            <Col>
              <span>调用占比</span> : <span>{mobileDataItem['调用占比']}</span>
            </Col>
          </Col>
          <Col span={12}>
            <span>根调用占比</span> : <span>{mobileDataItem['根调用占比']}</span>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Col>
              <span>调用方式</span> : <span>{mobileDataItem['调用方式']}</span>
            </Col>
          </Col>
          <Col span={12}>
            <span>强弱依赖</span> : <span>{mobileDataItem['强弱依赖']}</span>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Col>
              <span>上游超时配置</span> : <span>{mobileDataItem['上游超时配置']}</span>
            </Col>
          </Col>
          <Col span={12}>
            <span>平均耗时</span> : <span>{mobileDataItem['平均耗时']}</span>{' '}
            <a href="https://www.baidu.com">耗时分析</a>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Col>
              <span>来源Trace示例</span> : <a href="https://www.baidu.com">查看</a>
            </Col>
          </Col>
          <Col span={12}>
            <span>节点标识</span> : <a href="https://www.baidu.com">点击复制</a>
          </Col>
        </Row>
      </Panel>
    </Collapse>
  );
}

export default CustomNode;
